 <template>
  <div class="app">
    <header>
      <div class="head"><span>ele.me</span><span>登录|注册</span></div>
      <div class="poa"> 
        <p class="dw">
          <span>当前定位城市</span><span>定位不准时,请在城市列表选择</span>
        </p>
        <p class="ab"><span>北京</span></p>
      </div>
    </header>
    <main>
      <div class="hot">
        <p class="hot-p">热门城市</p>
        <ul class="hot-ul">
          <li v-for="item in hot" @click="li(item.name)">{{ item.name }}</li>
        </ul>
      </div>
      <div class="city-xq" v-for="(i, index) in arrnew">
        <p class="xq">{{ i.k }}<span>(按字母排序)</span></p>
        <div class="cli">
          <span v-for="e in i.list" @click="clixq(e.name)">{{ e.name }}</span>
        </div>
      </div>
      <!-- <p class="cs"><span>你好</span></p> -->
    </main>
  </div>
</template>
 <script>
export default {
  props: ["list"],
  data() {
    return {
      hot: "",
      green: "",
      gr: "",
      k: "",
      arr: [],
      arrnew: [],
      tite:"城市"
    };
  },
  methods: {
    clixq(u) {
      this.$router.push({ path: "/Cisc", query: { m: u } });
    },
    li(i) {
      console.log(i);
      this.$router.push({ path: "/Cisc", query: { h: i } });
    },
  },
  mounted() {
    this.axios.get("http://elm.cangdu.org/v1/cities?type=hot").then((res) => {
      this.hot = res.data;
    });
    this.axios.get("http://elm.cangdu.org/v1/cities?type=group").then((res) => {
      this.green = res.data;
      var arr = [];
      for (var key in this.green) {
        arr.push({ k: key, list: this.green[key] });
      }
      console.log(arr);
      for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr.length - 1; j++) {
          if (arr[j].k > arr[j + 1].k) {
            var o = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = o;
          }
        }
      }
      this.arrnew = arr;
    });
  },
  computed: {},
};
</script>
 <style lang='css' spend>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
  border: 1px solid #000;
}

a,
input,
button {
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}
input,
button {
  -webkit-appearance: none;
  /* 在ios中加入这句能修改button和input的宽高 */
}
img,
a {
  -webkit-touch-callout: none;
  /* 禁止长按弹出菜单 */
}
img {
  vertical-align: middle;
}
html,
body,
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 10rem;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  background: #2f90e7;
  padding: 0px 10px 0px 10px;
  align-items: center;
}
.head span {
  color: #e7ffff;
}
.poa {
  width: 100%;
  height: 8rem;
  display: flex;
  /* justify-content: space-between; */
  flex-direction: column;
}
.dw {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #cccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px 0px 10px;
}
.dw span {
  font-size: 13px;
  color: #cccc;
}
.ab {
  display: flex;
  width: 100%;
  height: 50%;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px 0px 10px;
}
.ab span {
  color: #2f90e7;
}
.hot {
  /* flex: 1; */
  width: 100%;
  height: 15rem;
  display: flex;
  flex-direction: column;
  background: #ffff;
}
.hot-p {
  width: 100%;
  height: 2rem;
  font-size: 14px;
  color: #cccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hot-ul {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-content: center;
}
.hot-ul li {
  width: 25%;
  height: 50%;
  /* border: 1px solid #000; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f90e7;
}
main {
  /* margin-top: 130px;  */
  flex: 1;
  overflow-y: auto;
  background: #cccc;
}
.city-xq {
  overflow: hidden;

  background: #ffff;
  margin-bottom: 10px;
}
.xq {
  width: 100%;
  height: 2rem;
  border-bottom: 1px solid #cccc;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 20px;
}
.cli {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-content: center;
}
.cli span {
  width: 21.5%;
  height: 50px;
  border: 1px solid #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 12px;
  margin-top: 20px;
  font-size: 13px;
  white-space: nowrap;
}
.cs {
  position: fixed;
  top: 0px;
  font-size: 50px;
  color: red;
}
</style>